<template>
  <div class="page-container">
    <div class="page-row">
      <el-row style="flex:auto;margin-right:10px;margin-bottom:10px">
        <el-col :span="24">
          <el-card :body-style="{ padding: `11px` }" shadow="hover">
            <el-row style="display:flex;align-items:stretch;flex-wrap:nowrap;">
              <div style="margin-right:10px">
                <div class="tips-data">
                  <span class="tips">客户阶段</span>
                  <el-icon @click="openStageSetting" size="13px" style="cursor: pointer;">
                    <ele-Setting style="color:#909399;"/>
                  </el-icon>
                </div>
                <div class="tips-data">
                  <span class="tips small-tips">当前数据</span>
                </div>
                <div class="tips-data">
                  <span class="tips small-tips">今日新增</span>
                </div>
                <div class="tips-data">
                  <span class="tips small-tips">昨日新增</span>
                </div>
              </div>
              <el-row style="display:flex;flex:1;overflow:hidden;">
                <div class="tips-cell" v-for="(item, index) in stageList.common" :key="item.id">
                  <div class="tips-item">
                    <span class="tips-name">{{ item.name }}</span>
                    <el-icon v-if="index < stageList.common.length - 1">
                      <ele-DArrowRight/>
                    </el-icon>
                  </div>
                  <!-- 当前 -->
                  <p :class="['item-data', index < stageList.common.length - 1 ? 'item-right' : '']">{{ item['currentNum'] }}</p>
                  <!-- 今日新增 -->
                  <p :class="['item-data', index < stageList.common.length - 1 ? 'item-right' : '']">{{ item['todayNum'] }}</p>
                  <!--<p :class="['item-data', item.today < 0 ? 'green' : item.before == 0 ? '' : 'red', index < stageList.length - 1 ? 'item-right' : '']">-->
                  <!--    <template v-if="item.today > 0">+</template>{{item.before}}-->
                  <!--</p>-->
                  <!-- 昨日新增 -->
                  <p :class="['item-data', index < stageList.common.length - 1 ? 'item-right' : '']">{{ item['yesterdayNum'] }}</p>
                </div>
                <div class="divider" v-if="stageList.extra.length > 0"/>
                <div class="tips-cell" v-for="item in stageList.extra" :key="item.id">
                  <div class="tips-item">
                    <span class="tips-name">{{ item.name }}</span>
                  </div>
                  <!-- 当前 -->
                  <p class="item-data">{{ item['currentNum'] }}</p>
                  <!-- 今日新增 -->
                  <p class="item-data">{{ item['todayNum'] }}</p>
                  <!-- 昨日新增 -->
                  <p class="item-data">{{ item['yesterdayNum'] }}</p>
                </div>
              </el-row>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-row style="margin-bottom:10px">
        <el-card :body-style="{ padding: `0` }" shadow="hover">
          <el-table :data="matterData" size="small" class="matter-table">
            <el-table-column prop="name" width="40px" align="center">
              <template #header>
                <el-icon @click="matterVisible = true" size="13px" style="cursor: pointer;">
                  <ele-Setting style="color:#909399;"/>
                </el-icon>
              </template>
            </el-table-column>
            <!-- 事项统计表头 -->
            <el-table-column v-for="item in matterHeader" :key="item.code" :prop="item.code" :label="item.name" min-width="80" align="center"/>
          </el-table>
        </el-card>
        <!-- 合同统计 -->
        <el-card :body-style="{ padding: `0` }" style="margin-left:10px;" shadow="hover">
          <el-table :data="amountData" size="small" class="amount-table" :span-method="amountTableSpan">
            <el-table-column prop="name" align="center"/>
            <el-table-column prop="before" label="上月" align="center"/>
            <el-table-column prop="current" label="本月" align="center"/>
          </el-table>
        </el-card>
      </el-row>
    </div>
    <el-row justify="space-between">
      <el-col :span="18">
        <el-button type="primary" size="small" @click="openCreate">新建线索</el-button>
        <el-button size="small" @click="openBatchEdit">批量修改</el-button>
        <el-button size="small" :icon="Filter" @click="openFilter">综合筛选</el-button>
        <el-button size="small" icon="ele-Refresh" @click="resetQuery">查看全部</el-button>
      </el-col>
      <el-col :span="6" style="justify-content:flex-end;display:flex;">
        <el-button size="small" :icon="Setting" @click="dialogHeader = true">表头设置</el-button>
        <el-button size="small" :icon="Upload">导出</el-button>
        <el-upload v-model:file-list="importParams.files" :action="importParams.action" :headers="importParams.headers" :limit="1" style="margin: 0 12px">
          <el-button size="small" :icon="Download">导入</el-button>
        </el-upload>
        <el-button size="small">17名单</el-button>
      </el-col>
    </el-row>
    <div class="table-box">
      <el-table :data="list" v-loading="tableLoading" @selection-change="tableSelection" stripe border size="small" class="table-list" :cell-style="{textAlign: 'center'}" :header-cell-style="{textAlign: 'center'}">
        <el-table-column type="selection" width="30" fixed="left"/>
        <el-table-column v-for="item in header" :key="item.id" :prop="item.label" :fixed="item.label == 'nickname' ? 'left' : false" :min-width="item.width">
          <template #header>
            <span>{{ item.name }}</span>
            <!-- 可搜索表头 -->
            <el-popover placement="bottom" :width="130" trigger="click" v-if="item.isFilter && item.filter == 'search'">
              <template #reference>
                <el-icon :size="15" style="margin-left: 2px" :color="(search[item.label] != null && search[item.label].length > 0) ? 'red' : 'var(--el-color-primary)'">
                  <ele-Search/>
                </el-icon>
              </template>
              <el-input :placeholder="`请输入${item.name}`" v-model.trim="search[item.label]" size="small" clearable @input="searchTable"/>
            </el-popover>
            <!-- 可筛选表头 -->
            <el-popover placement="bottom" :width="225" trigger="click" @after-leave="searchTable" v-if="item.isFilter && item.filter == 'filter'">
              <template #reference>
                <el-icon :size="15" style="margin-left: 2px" :color="(search[item.label] != null && search[item.label].length > 0) ? 'red' : 'var(--el-color-primary)'">
                  <ele-Filter/>
                </el-icon>
              </template>
              <!-- 多选框并分页 -->
              <!--              <checkbox-page-list :data="filterList[item.fieldName]" v-model="search[item.fieldName]" label="id" name="name"/>-->
              <div v-if="item.label == 'sourceChannel'">    <!-- 来源分类 -->
                <el-input v-model="sourceConfig.channel" size="small" placeholder="搜索" @input="searchChannel" clearable/>
                <el-scrollbar max-height="600px">
                  <el-radio-group v-model="search[item.label]" size="small" v-if="sourceConfig.channelList && sourceConfig.channelList.length > 0">
                    <el-radio v-for="(radio, index) in sourceConfig.channelList" :key="radio.id" :label="radio.id" @click.prevent="channelChange(index)">
                      {{ radio.name }}
                    </el-radio>
                  </el-radio-group>
                  <el-empty style="padding: 0;font-size:12px;" v-else :image-size="50" description="无数据"/>
                </el-scrollbar>
              </div>
              <div v-else-if="item.label == 'sourceScene'">    <!-- 来源类型 -->
                <el-input v-model="sourceConfig.scene" size="small" placeholder="搜索" @input="searchScene" clearable/>
                <el-scrollbar max-height="600px">
                  <el-radio-group v-model="search[item.label]" size="small" v-if="sourceConfig.sceneList && sourceConfig.sceneList.length > 0">
                    <el-radio v-for="radio in sourceConfig.sceneList" :key="radio.id" :label="radio.id" @click.prevent="sceneChange(radio.id)">{{ radio.name }}</el-radio>
                  </el-radio-group>
                  <el-empty style="padding: 0;font-size:12px;" v-else :image-size="50" description="无数据"/>
                </el-scrollbar>
              </div>
              <div v-else>
                <el-scrollbar max-height="600px">
                  <el-checkbox-group v-model="search[item.label]" size="small" v-if="filterList[item.label] && filterList[item.label].length > 0">
                    <el-checkbox v-for="option in filterList[item.label]" :key="option.id" :label="option.id">{{ option.name }}</el-checkbox>
                  </el-checkbox-group>
                  <el-empty style="padding: 0;font-size:12px;" v-else :image-size="50" description="无数据"/>
                </el-scrollbar>
              </div>
            </el-popover>

          </template>
          <template v-slot="{row}" v-if="item.isFilter && item.label == 'nickname'">
            <span class="primary" @click="openDetail(row)">{{ row.nickname }}</span>
          </template>
          <template v-slot="{row}" v-else-if="item.isFilter && item.filter == 'filter' && !['managerNames', 'belongName'].includes(item.label)">
            <span v-for="option in filterList[item.label]" :key="option.id" v-show="row[item.label] == option.id">{{ option.name }}</span>
          </template>
          <!-- 跳转详情 -->
          <!--          <template v-slot="{row}" v-if="item.label === 'nickname'">-->
          <!--            <span class="primary" @click="openDetail(row)">{{ row.nickname }}</span>-->
          <!--          </template>-->
          <!--          <template v-slot="{row}" v-else-if="item.label === 'sourceChannel'">-->
          <!--            <span v-for="item in filterList.sourceChannel" :key="item.id" v-show="row.sourceChannel == item.id">{{ item.name }}</span>-->
          <!--          </template>-->
          <!--          <template v-slot="{row}" v-else-if="item.label === 'sourceScene'">-->
          <!--            <span v-for="item in filterList.sourceScene" :key="item.id" v-show="row.sourceScene == item.id">{{ item.name }}</span>-->
          <!--          </template>-->
          <!--          <template v-slot="{row}" v-else-if="item.isFilter && item.filter == 'filter'">-->
          <!--            <span v-for="item in filterList[item.label]" :key="item.id" v-show="row[item.label] == item.id">{{ item.name }}</span>-->
          <!--          </template>-->
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template v-slot="{row}">
            <el-button size="small" text type="primary" @click="modifyBlock(row)">{{ row.block == 0 ? '屏蔽' : '解除屏蔽' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page-block">
        <el-pagination
            :total="total"
            :small="true"
            :disabled="false"
            :background="false"
            @size-change="sizeChange"
            :hide-on-single-page="true"
            :page-sizes="[10, 20, 30, 40]"
            @current-change="loadTableData"
            v-model:page-size="search.size"
            v-model:currentPage="search.current"
            layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    </div>

    <!-- 表头设置对话框 -->
    <el-dialog title="表头设置" v-model="dialogHeader" destroy-on-close width="40%" @close="dialogHeader = false" @opened="dialogOpened" top="5vh">
      <el-table ref="tableHeaderRef" :data="allHeader" @selection-change="headerChange" stripe border :cell-style="{textAlign: 'center'}" row-key="label"
                :header-cell-style="{textAlign: 'center', background: 'var(--el-color-primary-light-9)', color: 'var(--next-bg-menuBar-light-1)'}">
        <el-table-column type="selection" width="90"/>
        <el-table-column label="表头名称" prop="name"/>
      </el-table>
      <template #footer>
        <el-button size="small" @click="dialogHeader = false">关闭</el-button>
        <el-button size="small" type="primary" @click="submitHeader">保存</el-button>
      </template>
    </el-dialog>

    <!-- 创建客户 -->
    <customer-create v-model:dialogDrawer="dialogCreate" @callback="refreshData"/>
    <!-- 客户阶段 -->
    <stage-setting v-model:dialogDrawer="stageVisible" @callback="getStageData"/>
    <!-- 自定义统计事项 -->
    <matter-setting v-model:dialog-visible="matterVisible" v-model:matter-list="matterHeader" @callback="getMatterData"/>
    <!-- 客户详情 -->
    <customer-detail v-model:dialogDrawer="dialogDetail" :detail-data="detailData" @callback="refreshData"/>
    <!--    &lt;!&ndash;  综合搜索   &ndash;&gt;-->
    <!--    <table-filter v-model:dialogDrawer="dialogFilter" @search="searchEvent"/>-->
    <!-- 批量修改  -->
    <customer-batch-edit v-model:dialog-visible="dialogBatchEdit" v-model:opportunity-ids="selectOpportunityIds" @callback="refreshData"/>
  </div>
</template>
<script>
import {onMounted, reactive, ref, toRefs} from 'vue'
import {Download, Upload, Filter, Setting} from '@element-plus/icons-vue'
import CustomerCreate from '/@/views/crm/components/CustomerCreate.vue'
import StageSetting from '/@/views/crm/components/StageSetting.vue'
import MatterSetting from '/@/views/crm/components/MatterSetting.vue'
import CustomerDetail from '/@/views/crm/components/CustomerDetail.vue'
import CustomerBatchEdit from '/@/views/crm/components/CustomerBatchEdit.vue'
import {ElMessage} from 'element-plus'
import opportunityApi from '/@/api/ums/customer/opportunity'
import {Session} from '/@/utils/storage'
import {getManageUsers} from '/@/api/sys/user'
import customerApi from '/@/api/ums/customer'
import matterApi from '/@/api/ums/customer/matter'
import sourceApi from '/@/api/ums/customer/source'
import stageApi from '/@/api/ums/customer/opportunityStage'


export default {
  name: 'crm-list',
  components: {
    CustomerBatchEdit,
    CustomerCreate,
    StageSetting,
    MatterSetting,
    CustomerDetail
  },
  setup() {
    const tableHeaderRef = ref()
    const state = reactive({
      // 导入客户
      importParams: {
        files: [],
        action: '/api/file/filaAttach/upload',
        headers: {
          '17work': Session.get('token')
        }
      },
      stageList: {  // 客户线索阶段数据 主干与完成分支合并, 异常分支不合并
        common: [],
        extra: []
      },
      dialogBatchEdit: false,   // 批量操作
      tableLoading: false,    // 表格加载控制
      selectOpportunityIds: [],   // 已选中的机会主键
      matterHeader: [],   // 统计事项表头
      matterData: [{name: '昨日'}, {name: '今日'}],   // 事项统计数据
      amountData: [{
        name: '合同金额',
        before: 0.00,
        current: 0.00
      }, {
        name: '回款金额',
        before: 0,
        current: 0
      }, {
        name: '当前应收款',
        before: 0,
        current: null
      }],
      // 客户列表
      list: [],
      // 记录数
      total: 0,
      // 搜索数据
      search: {
        current: 1,
        size: 10,
        nickname: null,          // 客户简称
        name: null,              // 客户联系人名称
        phone: null,             // 客户联系人手机号
        stageId: [],           // 客户阶段
        managerNames: [],      // 客户经理
        customerType: [],      // 客户类型
        sourceChannel: '',     // 客户来源
        belongIds: [],         // 线索归属人
        customerList: null     // 客户状态
      },
      manageUsers: [],   // 客户经理列表（管理的用户）
      allHeader: [
        {
          filter: 'search',
          isFilter: true,
          label: 'nickname',
          name: '客户简称',
          width: '120',
          sort: 0
        }, {
          filter: '',
          isFilter: false,
          label: 'name',
          name: '联系人',
          width: '120',
          sort: 1
        }, {
          filter: 'search',
          isFilter: true,
          label: 'phone',
          name: '联系人手机号',
          width: '130',
          sort: 2
        }, {
          filter: '',
          isFilter: false,
          label: 'productLineName',
          name: '产品线',
          width: '120',
          sort: 3
        }, {
          filter: 'filter',
          isFilter: true,
          label: 'stageId',
          name: '客户阶段',
          width: '120',
          sort: 4
        }, {
          filter: '',
          isFilter: false,
          label: 'actionDays',
          name: '最近一次行动距今天',
          width: '140',
          sort: 5
        }, {
          filter: '',
          isFilter: false,
          label: 'signDate',
          name: '预估签约日期',
          width: '120',
          sort: 6
        }, {
          filter: '',
          isFilter: false,
          label: 'signAmount',
          name: '金额（元）',
          width: '120',
          sort: 7
        }, {
          filter: '',
          isFilter: false,
          label: 'probability',
          name: '成功概率',
          width: '120',
          sort: 8
        }, {
          filter: '',
          isFilter: false,
          label: 'levelName',
          name: '客户等级',
          width: '120',
          sort: 9
        }, {
          filter: 'filter',
          isFilter: true,
          label: 'customerType',
          name: '客户类型',
          width: '120',
          sort: 10
        }, {
          filter: 'filter',
          isFilter: true,
          label: 'managerNames',
          name: '客户经理',
          width: '120',
          sort: 11
        }, {
          filter: 'filter',
          isFilter: true,
          label: 'sourceChannel',
          name: '线索来源分类',
          width: '120',
          sort: 12
        }, {
          filter: 'filter',
          isFilter: true,
          label: 'sourceScene',
          name: '线索来源类型',
          width: '120',
          sort: 13
        }, {
          filter: 'filter',
          isFilter: true,
          label: 'belongName',
          name: '线索归属人',
          width: '120',
          sort: 14
        }, {
          filter: '',
          isFilter: false,
          label: 'outCompany',
          name: '外协公司',
          width: '120',
          sort: 15
        }, {
          filter: '',
          isFilter: false,
          label: 'followDays',
          name: '跟进天数',
          width: '120',
          sort: 16
        }, {
          filter: '',
          isFilter: false,
          label: '',
          name: '成交耗时（天）',
          width: '120',
          sort: 16
        }
      ],  // 全部表头
      header: [],   // 动态表头数据列表
      selectedHeader: [],   // 开启表头编辑默认选中的
      dialogCreate: false,
      dialogHeader: false,  // 表头设置对话框
      stageVisible: false,
      matterVisible: false, // 事项设置
      dialogDetail: false,
      detailData: {},
      dialogFilter: false,
      // 过滤下拉列表
      filterList: {
        stageId: [],    // 阶段数据
        customerType: [{id: 0, name: '代理商'}, {id: 1, name: '直客'}, {id: 2, name: '代理商客户'}],   // 客户类型
        manage: [],     // 客户经理
        managerNames: [],    // 客户经理
        sourceChannel: [],  // 来源分类
        sourceScene: [],    // 来源类型
        belongIds: []   // 线索归属人
      },
      sourceConfig: {   // 来源分类与来源类型搜索
        channel: null,
        scene: null,
        channelList: [],
        sceneList: []
      }
    })

    const openStageSetting = () => {
      state.stageVisible = true
    }
    const sizeChange = () => {
      state.search.current = 1
      loadTableData()
    }
    const openDetail = (customer) => {
      state.detailData = customer
      // 加入经营范围名称
      state.dialogDetail = true
    }
    // 表头搜索调用
    const searchTable = () => {
      state.search.current = 1
      state.search.size = 10
      loadTableData()
    }
    const openCreate = () => {
      state.dialogCreate = true
    }
    const openFilter = () => {
      state.dialogFilter = true
    }
    const tableSelection = (selectedList) => {
      if (selectedList) {
        state.selectOpportunityIds = selectedList.map(m => m.id)
      } else {
        state.selectOpportunityIds = []
      }
    }
    // 综合搜索 - 关闭抽屉时调用
    const searchEvent = e => {
      state.search.customerList = e.customerList
      loadTableData()
    }
    // 显示批量操作对话框
    const openBatchEdit = () => {
      // 检查是否有选中
      if (state.selectOpportunityIds && state.selectOpportunityIds.length > 0)
        return state.dialogBatchEdit = true
      ElMessage.error('至少选中一个客户')
    }

    // 加载表格数据
    const loadTableData = () => {
      state.tableLoading = true
      opportunityApi.getPage({
        current: state.search.current,
        size: state.search.size,
        nickname: state.search.nickname,  // 客户简称
        phone: state.search.phone,  // 联系人手机号
        name: state.search.name,  // 联系人名称
        stageIds: state.search.stageId,   // 阶段id
        customerTypes: state.search.type,   // 客户类型
        managerIds: state.search.managerNames,  // 客户经理id
        sourceChannel: state.search.sourceChannel,  // 来源分类
        sourceScene: state.search.sourceScene,  // 来源类型
        belongIds: state.search.belongIds,   // 线索归属人
        customerStatus: state.search.customerList  // 客户状态
      }).then(res => {
        if (res.data) {
          state.total = res.data.total
          state.list = res.data.records
          state.tableLoading = false
        }
      }).catch(e => {
        state.tableLoading = false
        console.log(e)
      })
    }
    // 表头对话框的回调
    const dialogOpened = () => {
      state.header.forEach(item => {
        state.selectedHeader.push(item)
        tableHeaderRef.value.toggleRowSelection(item, true)
      })
    }
    // 表头选中改变
    const headerChange = (list) => {
      if (state.selectedHeader.length > list.length) {
        state.selectedHeader = list
      } else {
        const item = list[list.length - 1]
        state.selectedHeader.splice(item.sort, 0, item)
      }
    }
    // 保存表头数据
    const submitHeader = () => {
      customerApi.saveHeader(state.selectedHeader).then(res => {
        state.header = Object.assign([], state.selectedHeader)
        state.headerVisible = false
        ElMessage.success('保存成功！')
      }).catch(e => console.log(e))
    }
    // 来源分类查找
    const searchChannel = (val) => {
      if (val) {
        state.sourceConfig.channelList = []
        for (let i = 0; i < state.filterList.sourceChannel.length; i++) {
          let item = state.filterList.sourceChannel[i]
          if (item.name.indexOf(val) != -1) {
            state.sourceConfig.channelList.push(item)
          }
        }
      } else {
        state.sourceConfig.channelList = JSON.parse(JSON.stringify(state.filterList.sourceChannel))
      }
    }
    // 来源分类改变选中
    const channelChange = (idx) => {
      let item = state.sourceConfig.channelList[idx]
      if (state.search.sourceChannel != item.id) {  // 非重复点击, 修改来源类型列表数据
        state.search.sourceChannel = item.id
        state.filterList.sourceScene = state.sourceConfig.sceneList = JSON.parse(JSON.stringify(item.children))
      } else {  // 重复选择=取消选中, 来源分类未选择, 来源类型显示全部
        state.search.sourceChannel = null
        state.sourceConfig.sceneList = JSON.parse(JSON.stringify(state.filterList.sourceScene))
      }
    }
    // 来源类型查找
    const searchScene = (val) => {
      if (val) {
        state.sourceConfig.sceneList = []
        for (let i = 0; i < state.filterList.sourceScene.length; i++) {
          let item = state.filterList.sourceScene[i]
          if (item.name.indexOf(val) != -1) {
            state.sourceConfig.sceneList.push(item)
          }
        }
      } else {
        state.search.sourceScene = null
        state.sourceConfig.sceneList = JSON.parse(JSON.stringify(state.filterList.sourceScene))
      }
    }
    // 来源类型改变选中
    const sceneChange = (val) => {
      if (state.search.sourceScene == val) {
        state.search.sourceScene = null
      } else {
        state.search.sourceScene = val
      }
    }
    // 清除搜索并重新加载
    const resetQuery = () => {
      state.selectOpportunityIds = []
      state.search = {
        current: 1,
        size: 10,
        nickname: null,        // 客户简称
        name: null,            // 客户联系人名称
        phone: null,           // 客户联系人手机号
        stageId: [],           // 客户阶段
        managerNames: [],      // 客户经理id列表
        customerType: [],      // 客户类型
        sourceChannel: null,     // 客户来源分类
        sourceScene: null,     // 客户来源类型
        belongIds: [],         // 线索归属人
        customerList: null     // 客户状态
      }
      // 重新加载表格数据
      loadTableData()
    }
    /**
     * 修改屏蔽状态
     */
    const modifyBlock = (customer) => {
      let val = customer.block == 0 ? 1 : 0
      customerApi.blockModify({
        id: customer.customerId,
        block: val
      }).then(res => {
        if (res.data) {
          state.list.forEach(item => {
            if (item.customerId == customer.customerId) {
              item.block = val
            }
          })
          ElMessage.success('修改成功！')
        }
      }).catch(e => console.log(e))
    }
    /**
     * 获取阶段列表以及对应统计数据
     */
    const getStageData = () => {
      stageApi.getListStages().then(res => {
        if (res.data) {
          state.stageList = res.data
          state.filterList.stageId = state.stageList.common.concat(state.stageList.extra)
        }
      }).catch(e => console.log(e))
    }
    /**
     * 顶部金额表格合并行/列方法
     */
    const amountTableSpan = (tableProps) => {
      if (tableProps.rowIndex == 2 && tableProps.columnIndex == 1) {
        return [1, 2]
      }
    }
    /**
     * 获取自定义统计事项表头和数据
     */
    const getMatterData = () => {
      matterApi.getMatterData().then(res => {
        state.matterHeader = res.data.headers
        state.matterData = res.data.dataList
      }).catch(e => console.log(e))
    }
    /**
     * 刷新数据
     */
    const refreshData = () => {
      getStageData()
      loadTableData()
    }

    onMounted(() => {
      // 表头
      customerApi.getHeaders().then(res => {
        if (res.data && res.data.length > 0) {
          res.data.forEach(item => {
            for (let i = 0; i < state.allHeader.length; i++) {
              let headerItem = state.allHeader[i]
              if (item.label == headerItem.label) {
                state.header.push(headerItem)
              }
            }
          })
        } else {
          state.header = state.allHeader
        }
      }).catch(e => console.log(e))
      // 来源
      sourceApi.getList().then(res => {
        if (res.data) {
          state.sourceConfig.channelList = state.filterList.sourceChannel = res.data
          res.data.forEach(item => {
            if (item.children && item.children.length > 0) {
              state.filterList.sourceScene = state.filterList.sourceScene.concat(item.children)
            }
          })
          state.sourceConfig.sceneList = state.filterList.sourceScene
        }
      }).catch(e => console.log(e))
      // 线索阶段数据
      getStageData()
      // 自定义事项表头
      getMatterData()
      // 金额统计表格
      opportunityApi.getSumAmount().then(res => state.amountData = res.data).catch(e => console.log(e))
      getManageUsers().then(res => state.manageUsers = res.data).catch(e => console.log(e))
      // 获取客户经理列表
      customerApi.getCustomerManagers().then(res => state.filterList.managerNames = res.data).catch(e => console.log(e))
      loadTableData()
    })

    return {
      ...toRefs(state),
      Download,
      Upload,
      Filter,
      Setting,
      tableHeaderRef,
      openStageSetting,
      sizeChange,
      openDetail,
      searchTable,
      openCreate,
      openFilter,
      resetQuery,
      loadTableData,
      searchEvent,
      tableSelection,
      openBatchEdit,
      headerChange,
      submitHeader,
      dialogOpened,
      searchChannel,
      channelChange,
      searchScene,
      sceneChange,
      modifyBlock,
      amountTableSpan,
      getStageData,
      getMatterData,
      refreshData
    }
  }
}
</script>
<style scoped lang="scss">
.page-container {
  padding: 1px;

  .page-row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;

    .tips-data {
      display: flex;
      align-items: center;
      height: 28px;
      margin-top: 5px;

      .tips {
        margin-right: 3px;
        font-size: 13px;
      }

      &:first-child {
        height: unset;
        margin-top: 0;
      }
    }

    .tips-cell {
      flex: auto;

      .tips-item {
        display: flex;
        align-items: center;
        padding-left: 10px;
        justify-content: space-between;
      }

      .tips-name {
        margin-right: 10px;
        flex: 1;
        overflow: hidden;
        text-align: center;
      }

      .item-data {
        text-align: center;
        height: 28px;
        margin-top: 5px;
        line-height: 28px;
        color: var(--el-menu-text-color);
        font-size: 13px;
      }

      .item-right {
        margin-right: 14px;
      }

      .red {
        color: var(--el-color-danger)
      }

      .green {
        color: var(--el-color-success);
      }
    }

    .divider {
      margin: 5px 10px 0;
      border-right: 1px solid var(--next-border-color-light);
    }

    :deep(.el-table__row) {
      &:last-child {
        .el-table__cell {
          border-bottom: none;
        }
      }
    }

    :deep(.el-table__inner-wrapper) {
      &::before {
        display: none;
      }
    }
  }

  .table-list {
    border: 1px solid var(--el-table-border-color);
    border-bottom: none;

    :deep(thead .cell) {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :deep(thead th:last-child .cell) {
      justify-content: center;
    }

    :deep(thead .el-icon) {
      margin-top: -2px;
      cursor: pointer;
    }

    .primary {
      cursor: pointer;
      color: var(--el-color-primary);
    }

    :deep(.el-button) {
      margin-left: 0;
      margin-right: 12px;
    }

    :deep(.el-table__body td.el-table__cell) {
      border-right: 1px solid var(--el-border-color-light);
      padding: 0;

      &:last-child {
        border-right: none;
      }
    }

    .order-row-item {
      width: 100%;

      :deep(.el-col) {
        border-right: 1px solid var(--el-border-color-light);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        &:last-child {
          border-right: none;
        }
      }
    }

    .order-border-none {
      :deep(.el-col) {
        border: none;
      }
    }
  }

  .table-box {
    background: #fff;

    :deep(.el-table__header-wrapper .el-table__cell) {
      background: var(--el-color-primary-light-9);
      color: var(--next-bg-menuBar-light-1);
    }
  }

  .matter-table {
    :deep(tr) {
      height: 47px;
    }
  }

  .amount-table {
    :deep(tr) {
      height: 35px;
    }
  }
}
</style>
